<template>
	<view :data-theme='theme()' :class="theme() || ''">
		<view class="card" v-if="!loadding">
			<!-- #ifdef APP-PLUS -->
			<header-bar></header-bar>
			<!-- #endif -->
			<!--产品列表-->
			<template v-if="groupData.length > 0">
				<view class="address-bar d-e-c">
					<view class="f30" @click="isEdit = !isEdit">
						<button class="f24" v-if="isEdit">完成</button>
						<button class="f24" v-else>编辑</button>
					</view>
				</view>

				<view class="section">
					<view class="supplier_list">
						<view  v-for="g in groupData" :key="g" style="position: relative;">
							<view class="cardtag">{{g.name }}
							</view>
							<view v-if="g.name!=='普通商品'" class="actitem">
								<Countdown color="red" :config="buildActiveTime(activeDic[g.name])" ref="xxxxx">
								</Countdown>
							</view>
							<view class="item" v-for="(item, index) in g.tableData" :key="index">
								<checkbox-group @change="checkItem(g.name, item, index)">
									<label class="d-c-c">
										<checkbox value="cb" class="checkbox" :checked="item.checked" />
									</label>
								</checkbox-group>
								<image @click.stop="goDetailsPage(item)" :src="item.productImage" class="cover" mode="aspectFit"></image>
								<view class="info">
									<view @click.stop="goDetailsPage(item)">	
									<view class="title">{{ item.productName }}</view>
									<view class="describe">{{ item.productAttr }}</view>
									<view class="describe">基地:{{ item.produceName }}</view>
									</view>
									<view class="level-box count_choose">
										<view class="price">
											¥
											<text class="num">{{token && UserState == '20'?item.productPrice:'**' }}</text>
										</view>
										<view class="num-wrap">
											<view class="" @tap.stop="reduceFunc(item)" v-if="item.totalNum > 1">
												<image class="reduce_icon" src="../../static/icon/reduce.png" mode="">
												</image>
											</view>
											<view class="text-wrap">
											<!-- {{item.totalNum}} -->
											<input class="uni-input" @change="totalNumChange(item)" v-model="item.totalNum" type="number" />
											</view>
											<view class="" @tap.stop="addFunc(item)"
												v-if="item.totalNum < item.stockNum ">
												<image class="add_icon" src="../../static/icon/add.png" mode=""></image>
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>

				</view>
			</template>
			<template v-else>
				<view class="none-data-box cart_none">
					<image class="cart_none_img" src="/static/cart_none.png" mode="widthFix"></image>
					<text class="f26 gray9 pt10">购物车空空如也</text>
					<button type="default" class="theme-btn mt30 ww100 none_btn" @tap="gotoShop">去购物</button>
				</view>
			</template>

			<!--底部按钮-->
			<view class="bottom-btns f28" :class="isAuto? 'isAuto' : '' " v-if="groupData.length > 0">
				<checkbox-group @change="onCheckedAll">
					<label class="d-c-c mr20">
						<checkbox class="checkbox" :checked="checkedAll" value="cb" />
						全选
					</label>
				</checkbox-group>
				<view class="d-e-c" v-if="!isEdit">
					<view class="total d-s-c flex-1 mr20">
						<text>合计：</text>
						<view class="price f22">
							¥
							<text class="num f40">{{ token && UserState == '20'?totalPrice:'**' }}</text>
						</view>
					</view>
					<button type="primary" class="buy-btn theme-btn" @click="Submit()">去结算</button>
				</view>
				<view class="" v-else><button type="primary" @click="onDelete()"
						class="delete-btn theme-btn mr20">删除</button>
				</view>
			</view>
			<!--推荐-->
			<recommendProduct :location="10"></recommendProduct>
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import recommendProduct from '@/components/recommendProduct/recommendProduct.vue';
	import Countdown from '@/components/countdown/countdown-presale.vue';
	export default {
		components: {
			recommendProduct,
			Countdown
		},
		data() {
			return {
				/*是否加载完成*/
				loadding: true,
				isEdit: false,
				token:uni.getStorageSync('token'),
				UserState:uni.getStorageSync('UserState'),
				/*购物车商品*/
				groupData: [],
				tableData: [],
				arrIds: [],
				// 是否全选
				checkedAll: false,
				isAuto: 0,
				totalPrice: 0,
				productData: [{
						name: '普通商品',
						value: 1
					},
					{
						name: '普通拼团',
						value: 2
					},
					{
						name: '秒杀活动',
						value: 3
					},
					{
						name: '预售活动',
						value: 4
					},
					{
						name: '进口苗活动',
						value: 5
					},
					{
						name: '特惠活动',
						value: 6
					},
					{
						name: '阶梯拼团',
						value: 7
					},
					{
						name: '多商品拼团',
						value: 8
					},
				],
				activeDic: {}
			};
		},
		onLoad() {},
		onShow() {
			/*获取产品详情*/
			this.getData();
			this.getTabBarLinks();
			this.getUserState();
		},
		methods: {
			// 获取审批状态
			getUserState(){
				let self = this;
				self._post('user/user/detail', {
					source: self.getPlatform()
				}, function(res) {
					// AUDIT("审批中", 10),
					// NORMAL("正常", 20),
					// DISABLE("禁用", 30),
					// REFUSE("审批拒绝",40),
					uni.setStorageSync('UserState', res.data.status);
				});
			},
			buildActiveTime(activeData) {
				const $this = this
				if (activeData) {

					const f = new Date()
					const startTime =
						`${f.getFullYear()}-${f.getMonth()+1}-${f.getDate()} ${activeData.dayStartTime}` //当天当活动开始时间
					const endTime = `${f.getFullYear()}-${f.getMonth()+1}-${f.getDate()} ${activeData.dayEndTime}`
					//当前时间
					const startValue = new Date(startTime)
					$this.startRange = activeData.startDate
					$this.endRange = activeData.endDate
					const start = dayjs(startTime).unix()
					const end = dayjs(endTime).unix()
					return {
						startstamp: start,
						endstamp: end
					}
				}
				return {}

			},
			/*获取数据*/
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				let self = this;
				self._post('order/cart/lists', {}, function(res) {
					self.groupData = []
					let auto = uni.getStorageSync('TabBar').isAuto && uni.getStorageSync('TabBar').isAuto != 0;
					self.isAuto = auto
					uni.hideLoading();
					self.tableData = res.data;
					const f = Object.keys(res.data)
					f.forEach(key => {
						const value = Number(key)
						const item = self.productData.find(f => f.value === value)
						if (item) {
							const list = res.data[key]
							const json = {
								name: item.name.replace('活动', ''),
								tableData: list.map(f=>{
									return {
										...f,
										checked:true 
									}
								})
							}
							if (list && list.length > 0) {
								self.activeDic[json.name] = list[0].activity
							}
							self.groupData.push(json)
							self.checkedAll = true 
						}
					})
					self.loadding = false;
					//计算总额
					self.updateTotalPrice()
				}, function(error) {
					self.getData();
				});
			},
			/**
			 * 获取选中的商品
			 */
			getCheckedData() {
				let checkedData = uni.getStorageSync('checkedData');
				return checkedData ? checkedData : [];
			},
			// 购物车商品详情
			goDetailsPage(row){
				console.log(row,'row')
				this.gotoPage('/pages/product/detail/detail?productId=' +row.productId)
			},
			/*单选*/
			checkItem(name, e, index) {
				const check = !e.checked;
				const groupItems = this.groupData
				const findex = groupItems.findIndex(f=>f.name === name)
				if (findex>-1) {
					this.groupData[findex].tableData[index].checked = check
				}
				//获取所有的选中数据
				const checkData = []
				const allData = []
				for(let i=0;i<groupItems.length;i++) {
					var data = groupItems[i].tableData
					allData.push(...data)
					var checkValues = data.filter(f=>f.checked)
					checkData.push(...checkValues)
				}
				// 更新选中记录
				this.onUpdateChecked();
				// 更新购物车已选商品总价格
				this.updateTotalPrice();
				// 更新全选状态
				this.checkedAll = checkData.length == allData.length 
			},

			/**
			 * 更新商品选中记录
			 */
			onUpdateChecked() {
				let self = this,
					checkedData = [];
				// self.tableData.forEach(item => {
				// 	if (item.checked == true) {
				// 		checkedData.push(`${item.productId}_${item.specSkuId}`);
				// 	}
				// });
				
				self.groupData.forEach(item => {
					if(item.tableData && item.tableData.length){
						item.tableData.map(val=>{
							if (val.checked == true) {
								checkedData.push(`${val.productId}_${val.specSkuId}`);
							}
						})
					}
					
				});
				
				
				
				// uni.setStorageSync('checkedData', checkedData);
			},
			removeCheck() {
				const $this =this 
				const check =$this.checkedAll
				const groupds = this.groupData
			  	for(let j=0;j<groupds.length;j++) {
			  		let items =  groupds[j].tableData 
			  		for (let i = 0; i < items.length; i++) {
			  			  $this.groupData[j].tableData[i].checked =check  
			  		}
			  	}
			},
			/*全选*/
			onCheckedAll() {
				const $this = this 
				$this.checkedAll = !$this.checkedAll
				console.log('sss',$this.checkedAll)
				$this.removeCheck()
				$this.updateTotalPrice()
				// let self = this;
				// self.checkedAll = !self.checkedAll;
				// self.tableData.forEach(item => {
				// 	item.checked = self.checkedAll;
				// });
				// self.updateTotalPrice();
				// // 更新选中记录
				// self.onUpdateChecked();
			},
			updateTotalPrice: function() {
				let total_price = 0;
				const groupds = this.groupData
				for(let j=0;j<groupds.length;j++) {
					let items =  groupds[j].tableData 
					for (let i = 0; i < items.length; i++) {
						if (items[i]['checked'] == true) {
							total_price += items[i]['totalNum'] * items[i]['productPrice'];
						}
					}
					/*保留2位小数*/
					this.totalPrice = total_price.toFixed(2);
				}
				
			},
			/*去结算*/
			Submit() {
				let arrIds = [];
				const $this = this 
				const groups = $this.groupData 
				for(let i=0;i<groups.length;i++) {
					const groupItem = groups[i]
					const rowsData = groupItem.tableData
					 rowsData.forEach(item => {
						if (item.checked == true) {
							arrIds.push(`${item.productId}_${item.specSkuId}_${item.batchId}_${item.activityId}`);
						}
					});
				}
				if (arrIds.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					});
					return false;
				}
			 this.gotoPage('orderpages/order/saveOrder?orderType=cart&cartIds=' + arrIds);
			},
			/*添加*/
			addFunc(item) {
				console.log('item', item)
				const maxValue = item.productSku.stockNum
				// if (item.totalNum > maxValue) {
				// 	uni.showToast({
				// 		title: '库存不足',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return false;
				// }
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post(
					'order/cart/add', {
						productId: item.productId,
						specSkuId: item.specSkuId,
						totalNum: 1
					},
					function(res) {
						self.loadding = false;
						self.getData();
					},
					function() {
						self.loadding = false;
					}
				);
			},
			/*减少*/
			reduceFunc(item) {
				let self = this;
				//判断最小起订量
				const minValue = item.productSku.minBuyCount
				if (item.totalNum < minValue) {
					uni.showToast({
						title: '此规格的商品最小起订量为' + minValue,
						icon: 'none',
						duration: 2000
					});
					return false;
				}

				if (item.total_num <= 1) {
					return;
				}
				uni.showLoading({
					title: '加载中'
				});
				self._post(
					'order/cart/sub', {
						cartId: item.cartId,
					},
					function(res) {
						self.loadding = false;
						self.getData();
						uni.hideLoading()
					}
				);
			},
			// 手动输入
			totalNumChange(item){
				console.log(item,'item')
				let self = this;
				//判断最小起订量
				const minValue = item.productSku.minBuyCount
				if (item.totalNum < minValue) {
					uni.showToast({
						title: '此规格的商品最小起订量为' + minValue,
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				
				if (item.total_num <= 1) {
					return;
				}
				const maxValue = item.productSku.stockNum
				// if (item.totalNum > maxValue) {
				// 	uni.showToast({
				// 		title: '库存不足',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return false;
				// }
				uni.showLoading({
					title: '加载中'
				});
				self._post(
					'order/cart/update', {
						cartId: item.cartId,
						totalNum: item.totalNum
					},
					function(res) {
						self.loadding = false;
						self.getData();
						uni.hideLoading()
					}
				);
			},
			/*删除购物车*/
			onDelete() {
				let self = this;
				let cartIds = self.getCheckedIds();
				if (!cartIds.length) {
					self.showError('您还没有选择商品');
					return false;
				}
				uni.showModal({
					title: '提示',
					content: '您确定要移除选择的商品吗?',
					success(e) {
						e.confirm &&
							self._post(
								'order/cart/delete', {
									cartIds: cartIds
								},
								function(res) {
									// 删除选中的商品
									// self.onDeleteEvent(cartIds);
									self.getData();
								}
							);
					}
				});
			},
			/**
			 * 获取已选中的商品
			 */
			getCheckedIds() {
				let self = this;
				console.log( JSON.stringify(self.groupData),'self.groupData')
				let arrIds = [];
				self.groupData.forEach(item => {
					if(item.tableData && item.tableData.length){
						item.tableData.map(val=>{
							if (val.checked == true) {
								arrIds.push(val.cartId);
							}
						})
					}
					
				});
				return arrIds;
			},

			/**
			 * 商品删除事件
			 */
			onDeleteEvent(cartIds) {
				let self = this;
				cartIds.forEach(cartId => {
					self.tableData.forEach((item, productIndex) => {
						if (cartId == item.cartId) {
							self.tableData.splice(productIndex, 1);
						}
					});
				});
				// 更新选中记录
				self.onUpdateChecked();
				return true;
			},
			/**
			 * 是否在数组内
			 */
			inArray(search, array) {
				for (var i in array) {
					if (array[i] == search) {
						return true;
					}
				}
				return false;
			},

			/*去购物*/
			gotoShop() {
				uni.switchTab({
					url: '/pages/product/category'
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
	}


	.foot_ {
		height: 98rpx;
		width: 100%;
	}

	.card .scroll-Y {
		position: relative;
	}

	.card .checkbox {
		@include font_color('font_color');
		transform: scale(0.7);
	}

	.address-bar {
		padding: 20rpx;
		background-color: #f2f2f2;
		padding-bottom: 0;
	}

	.address-bar button {
		border: none;
		background: none;
		color: #333333;
	}

	.section {
		background: #f2f2f2;
		padding: 20rpx;
	}

	.section .item {
		margin: 0 26rpx;
		display: flex;
		align-items: center;
		// border: 1px solid #f2f2f2;
		padding-right: 19rpx;
		padding-bottom: 29rpx;
		padding-top: 29rpx;
	}

	.section .cover {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8px;
	}

	.section .info {
		flex: 1;
		padding-left: 30rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.section .title {
		width: 100%;
		font-size: 28rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.vender .list .describe {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.section .describe {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.section .price {
		// color: $dominant-color;
		@include font_color("font_color");
		font-size: 24rpx;
	}

	.bottom-btns.isAuto {
		bottom: 140rpx;
	}

	.section .price .num {
		padding: 0 4rpx;
		font-size: 32rpx;
	}

	.section .level-box {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.section .level-box .key {
		font-size: 24rpx;
		color: #999999;
	}

	.section .level-box .num-wrap {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.section .level-box .icon-box {
		width: 33rpx;
		height: 33rpx;
		border: 1px solid #c5c5c5;
		background: #f2f2f2;
	}

	.section .level-box .icon-box .gray {
		color: #cccccc;
	}

	.section .level-box .icon-box .gray3 {
		color: #333333;
	}

	.section .level-box .text-wrap {
		margin: 0 20rpx;
		height: 33rpx;
		border: none;
		background: none;
	}

	.section .level-box .text-wrap input {
		padding: 0 4rpx;
		height: 33rpx;
		line-height: 1;
		width: 60rpx;
		font-size: 32rpx;
		text-align: center;
		display: flex;
		align-items: center;
		min-height: 33rpx;
	}

	.bottom-btns {
		position: fixed;
		width: 100%;
		padding: 0 0 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		margin-bottom: 10rpx;
		// /* bottom: calc(var(--window-bottom); */
		bottom: var(--window-bottom, 0);
		// bottom: 50px;
		left: 0;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
		background: #ffffff;
		z-index: 1000;
	}

	.bottom-btns .delete-btn {
		margin: 0;
		padding: 0 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		// background: linear-gradient(90deg, #FF6B6B 4%, #F6220C 100%);
		font-size: 28rpx;
	}

	.bottom-btns .buy-btn {
		margin: 0;
		padding: 0 24rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		// background: linear-gradient(90deg, #FF6B6B 4%, #F6220C 100%);
		font-size: 28rpx;
	}

	.bottom-btns .price {
		@include font_color("price_color");
	}

	.supplier_list {
		overflow: hidden;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.supplier_list_tit {
		display: flex;
		align-items: center;
		margin-left: 28rpx;
		margin-top: 28rpx;
	}

	.icon-dianpu1 {
		font-size: 34rpx;
		color: #333333;
		margin: 0 17rpx;
	}

	.cart_none .cart_none_img {
		width: 348rpx;
		height: 222rpx;
	}

	.none_btn {
		font-size: 32rpx;
		border-radius: 40rpx;
	}

	.add_icon,
	.reduce_icon {
		width: 32rpx;
		height: 32rpx;
	}

	.cardtag {
		padding: 5rpx 10rpx;
		background: #68bc1c;

		text-align: center;
		color: #fff;
		margin: 15rpx;
		display: inline-block;
	}

	.actitem {
		position: absolute;
		left: 120rpx;
		top: 15rpx;
	}
</style>